<template>
  <div id="app">
    <app-sidebar v-test="toggleSidebar"></app-sidebar>
    <div class="site">
      <app-header @toggle-sidebar="handleToggleSidebar"></app-header> 
      <main>
        <router-view></router-view>
      </main>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import AppHeader from "@/components/AppHeader.vue";
import AppSidebar from "@/components/AppSidebar.vue";
import { Getter, State, Action, Mutation } from "vuex-class";
import { Sidenav } from "@/directives/layout";
import { of, Subject } from "rxjs";
import { map, scan, startWith, mapTo } from "rxjs/operators";
@Component({
  components: {
    AppHeader,
    AppSidebar
  },
  directives: {
    test: Sidenav
  }
  // domStreams: ["plus$"],
  // subscriptions() {
  //   return {
  //     count$: this["plus$"].pipe(
  //       mapTo(1),
  //       startWith(0),
  //       scan((total: number, change: number) => total + change, 0)
  //     )
  //   };
  // }
})
export default class App extends Vue {
  // 切换侧边栏

  mounted() {
    this.loadData("http://localhost:3000/directions");
  }

  @Getter("layout/getShowSidebar") toggleSidebar;
  @Action("layout/toggleSidenav") actionSidebar;
  // @Mutation("load") loadData;
  @Action("load") loadData;

  handleToggleSidebar() {
    this.actionSidebar();
    // this.$store.dispatch("layout/toggleSidenav", null);
  }
}
</script>


<style lang="scss">
main {
  display: flex;
  flex: 1;
  justify-content: center;
}
</style>
